<template>
  <!-- 提现申请 -->
  <div class="withdraw">
    <el-dialog :visible.sync="isShow" width="35%" center :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="提现金额" prop="money">
          <el-input v-model.number="ruleForm.money" :placeholder="frozenCoin"></el-input>
        </el-form-item>
        <div @click="boxshow = !boxshow" class="coll-account">
          <el-card class="box-card">
            <div class="showMr">
              <span>收款账户</span>
              <span v-if="defaultPayee.default_payee==1">默认账户</span>
            </div>
            <div class="coll-title">
              收款人：
              <font class="font_success">{{defaultPayee.payee}}</font>
            </div>
            <div>
              收款渠道：{{defaultPayee.type == 1 ? '支付宝':'银行卡'}}，
              收款账户：
              <span style="color:#2E8B57">{{defaultPayee.num}}</span>
              <el-popover placement="top" title="信息更换" width="200" trigger="hover">
                <span>可以选择更换收款信息哟！</span>
                <i class="el-icon-info orange ml10" slot="reference"></i>
              </el-popover>
            </div>
          </el-card>
        </div>

        <div v-show="boxshow" class="acc-data">
          <span>我的收款账户</span>
          <el-card class="box-card" v-for="(item,index) in drawalList" :key="index">
            <div class="showMr">
              <div class="bank-title">
                {{index + 1}}，收款人：
                <font class="font_success">{{item.payee}}</font>
              </div>
              <el-switch
                :value="item.default_payee == 1"
                active-text="默认账户"
                @change="changeDefault(item.id)"
              ></el-switch>
            </div>
            <div>收款渠道：{{item.type == 1 ? '支付宝':'银行卡'}}，</div>
            <div>
              收款账户：{{item.num}}，
              <span v-if="item.sub_branch">收款银行：{{item.sub_branch}}。</span>
            </div>
          </el-card>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toEditInfor">添加收款账户</el-button>

        <!-- <el-button type="primary" v-if="edit_show" v-no-more-click:3000 @click="toEditInfor">修改默认收款人</el-button> -->
        <el-button
          type="primary"
          v-if="!btnShow"
          v-no-more-click:3000
          @click="submit('ruleForm')"
        >提 现</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {servicePhone} from '~/util/config.js'
export default {
  data() {
    var validateMoney = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入提现金额"));
      } else {
        if (!Number(value)) {
          callback(new Error("请输入正确的金额"));
        } else if (value <= 0) {
          callback(new Error("提现金额必须大于0"));
        } else {
          callback();
        }
      }
    };
    return {
      boxshow: false,
      isShow: false,
      ruleForm: {
        money: null,
        wr_id: null
        // comment: '',
        // to_type: 1,
        // number: '',
        // user_name: '',
        // bank: ''
      },
      rules: {
        money: [{ required: true, validator: validateMoney, trigger: "blur" }]
        // to_type: [
        //   { required: true, message: '请选择提现渠道', trigger: 'blur' }
        // ],
        // number: [
        //   { required: true, message: '请输入账号', trigger: 'blur' }
        // ],
        // user_name: [
        //   { required: true, message: '请输入账户名', trigger: 'blur' }
        // ],
        // bank: [
        //   { required: true, message: '请输入支行', trigger: 'blur' }
        // ],
      },
      frozenCoin: "",
      btnShow: false,
      edit_show: false,
      drawalList: [],
      type: 0,
      withdrawal_record: "",
      defaultPayee: {},
      servicePhone: servicePhone
    };
  },

  created() {
    this.getDrawal();
    // this.defaultPayee = this.$store.state.user.
  },
  methods: {
    handleChange() {},
    changeDefault(id) {
      this.$axios.put("api/withdrawal/" + id + "/set_default").then(res => {
        if (res.data.code == 200) {
          this.getDrawal(id);
        } else {
          this.$alert(res.data.message, "提示", {
            confirmButtonText: "确定",
            center: true,
            type: "warning",
            callback: action => {}
          });
        }
      });
    },
    changeCollect(index) {
      // let collIndex = this.drawalList.findIndex(item => item.id == index)
      // this.type = this.drawalList[collIndex].type
      // if(this.type == 1){
      //   this.ruleForm.to_type = 1
      //   this.ruleForm.number = this.drawalList[collIndex].num
      //   this.ruleForm.user_name = this.drawalList[collIndex].payee
      // } else{
      //   this.ruleForm.to_type = 2
      //   this.ruleForm.number = this.drawalList[collIndex].num
      //   this.ruleForm.user_name = this.drawalList[collIndex].payee
      //   this.ruleForm.bank = this.drawalList[collIndex].sub_branch
      // }
      // this.boxshow = false
    },
    // 获取个人信息
    getDrawal(id) {
      this.$axios.get("api/withdrawal").then(res => {
        if (res.data.code == 200) {
          this.drawalList = res.data.data;
          this.total = this.drawalList.length;
          if (this.total > 0) {

            for (let i = 0; i < this.total; i++) {
              if (this.drawalList[i].default_payee == 1) {
                this.defaultPayee = this.drawalList[i]
                return
              } else {
                this.defaultPayee = this.drawalList[0]
              }
            }
            this.edit_show = true;
          } else {
            this.btnShow = true;
          }
        } else {
          this.$alert(res.data.message, "提示", {
            confirmButtonText: "确定",
            center: true,
            type: "warning",
            callback: action => {}
          });
        }
      });
      // this.$axios.get("api/withdrawal").then(res => {
      //   if (res.data.code == 200) {
      //     this.drawalList = res.data.data;
      //     let collIndex = this.drawalList.findIndex(item => item.id == id);
      //     this.not_type = this.drawalList[collIndex].type;
      //     if (this.not_type == 1) {
      //       this.ruleForm.to_type = 1;
      //       this.ruleForm.default_payee = this.drawalList[
      //         collIndex
      //       ].default_payee;
      //       this.ruleForm.number = this.drawalList[collIndex].num;
      //       this.ruleForm.user_name = this.drawalList[collIndex].payee;
      //     } else {
      //       this.ruleForm.to_type = 2;
      //       this.ruleForm.default_payee = this.drawalList[
      //         collIndex
      //       ].default_payee;
      //       this.ruleForm.number = this.drawalList[collIndex].num;
      //       this.ruleForm.user_name = this.drawalList[collIndex].payee;
      //       this.ruleForm.bank = this.drawalList[collIndex].sub_branch;
      //     }
      //     this.boxshow = false;
      //   } else {
      //     this.$alert(res.data.message, "提示", {
      //       confirmButtonText: "确定",
      //       center: true,
      //       type: "warning",
      //       callback: action => {}
      //     });
      //   }
      // });
    },
    // 获取账户信息
    getDrawal1() {
      this.$axios.get("api/withdrawal").then(res => {
        if (res.data.code == 200) {
          this.drawalList = res.data.data;
          this.total = this.drawalList.length;
          if (this.total > 0) {
            // for (let i = 0; i < this.total; i++) {
            //   if (this.drawalList[i].default_payee == 1) {
            //     this.ruleForm.default_payee = 1;
            //     this.ruleForm.number = this.drawalList[i].num;
            //     this.ruleForm.user_name = this.drawalList[i].payee;
            //     this.ruleForm.to_type = Number(this.drawalList[i].type);
            //     this.ruleForm.bank = this.drawalList[i].sub_branch;
            //     return
            //   } else {
            //     this.ruleForm.default_payee = 2;
            //     this.ruleForm.number = this.drawalList[0].num;
            //     this.ruleForm.user_name = this.drawalList[0].payee;
            //     this.ruleForm.to_type = Number(this.drawalList[0].type);
            //     this.ruleForm.bank = this.drawalList[0].sub_branch;
            //   }
            // }
            this.edit_show = true;
          } else {
            this.btnShow = true;
          }
        } else {
          this.$alert(res.data.message, "提示", {
            confirmButtonText: "确定",
            center: true,
            type: "warning",
            callback: action => {}
          });
        }
      });
    },
    toEditInfor() {
      this.$router.push("/mechanism/home/bankCard");
    },
    show(data) {
      this.isShow = true;
      // this.ruleForm.money = pCoin
      if (data.frozenCoin != 0) {
        this.frozenCoin = `有${data.frozenCoin}元不可提现`;
      } else {
        this.frozenCoin = "请输入提现金额";
      }
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitPost();
          this.isShow = false;
        } else {
          return false;
        }
      });
    },
    submitPost() {
      let params = {
        money: this.ruleForm.money,
        wr_id: this.defaultPayee.id
        // to_type: this.ruleForm.to_type,
        // number :this.ruleForm.number,
        // user_name :this.ruleForm.user_name
      };
      if (this.ruleForm.to_type == 1) {
      } else if (this.ruleForm.to_type == 2) {
        params.bank = this.ruleForm.bank;
      }
      if (this.ruleForm.comment != "") {
        params.comment = this.ruleForm.comment;
      }
      this.$axios
        .post("api/drawing", params)
        .then(res => {
          if (res.data.code == 200) {
            this.$alert(
              `
          <p>发起提现申请成功！</p>
          <p>提现审核完成后会通知您，请您及时上传发票以免影响您的提现进度。</p>
          <p>余额<span class='font_danger'>-${this.ruleForm.money}</span>元</p>
          <p>提现到${this.defaultPayee.type == 1 ? "支付宝账户" : "银行卡"}</p>
          ${
            this.defaultPayee.type == 1
              ? `<p>支付宝账户名：${this.defaultPayee.payee}，支付宝账号：${this.defaultPayee.num}</p>`
              : `银行卡户名：${this.defaultPayee.payee}，银行卡号：${this.defaultPayee.num}, 开户支行：${this.defaultPayee.sub_branch}`
          }
          <p>工作人员会在72小时内处理，如有任何问题请联系：${this.servicePhone}。</p>
          `,
              "提示",
              {
                confirmButtonText: "确定",
                center: true,
                dangerouslyUseHTMLString: true,
                callback: action => {}
              }
            );
            this.$emit("refresh");
            this.handleClose();
          } else if (res.data.code == 400) {
            // this.$message.error(res.data.message)
            this.$alert(`${res.data.message}`, "提示", {
              confirmButtonText: "确定",
              center: true,
              callback: action => {}
            });
          }
        })
        .catch(err => {});
    },
    handleClose() {
      this.isShow = false;
      this.$refs["ruleForm"].resetFields();
    }
  }
};
</script>

<style lang='less' type='text/css' >
.showMr {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  span:nth-child(2) {
    color: turquoise;
  }
}
.withdraw {
  .el-dialog {
    min-width: 500px;
  }
  .el-form {
    .prompt {
      font-size: 12px;
      margin: 0 0 10px 100px;
    }
  }
  .dialog-footer {
    .el-button {
      background: rgba(88, 165, 234, 1);
      padding: 8px 15px;
      border-color: rgba(88, 165, 234, 1);
      color: rgba(254, 254, 254, 1);
      font-size: 15px;
    }
    .selectCollect {
      font-size: 16px;
    }
  }
  .coll-account {
    .box-card {
      // padding: 10px;
      cursor: pointer;
      .coll-title {
        margin: 5px 0 8px;
        font-size: 16px;
      }
    }
  }
  .acc-data {
    margin: 15px 0;
    .box-card {
      cursor: pointer;
      margin: 5px 0;
      .bank-title {
        margin: 5px 0;
      }
    }
  }
}
.accountDrawal {
  margin-left: 28px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
